<template>
    <!-- 黑名单 -->
    <div class="content-friend">
        <div>
            <el-divider content-position="left"><b>黑名单</b></el-divider>
        </div>
        <div style="overflow:hidden;min-height:500px">
            <el-card class="box-card" v-for="item in blackFriend" :key="item.id">
                <div class="box-card-img">
                    <el-avatar :size="70">
                        <img :src="item.img | pictureUrl" />
                    </el-avatar>
                </div>
                <div class="box-card-content-blacklist">
                    <p>{{item.name || item.NAME}} <spna style="float: right">{{ item.role }}
                        来源:{{item.remark == '关注'?'粉丝':item.remark}}--{{item.concernedClassifyId}}</spna></p>
                    <p>屏蔽时间: {{item.time.slice(0,10)+" "+item.time.slice(11,19)}}</p>
                    <el-button size="mini" @click="removalblacklistConfirm(item.id)">
                        移除黑名单</el-button>
                </div>
            </el-card>
        </div>
        <div class="pageStyle">
            <!--分页-->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[6, 10, 20, 50]" :page-size='pageSize'
                layout="total, sizes, prev, pager, next, jumper" :total=blackNum>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    const baseUrl = "http://topsmart.xyz:1315/"
    export default {
        watch:{
            $route(val){
                // this.getRecommend()
                this.getBacklist()
            }
        },
        created() {
            // this.getRecommend();
            this.getBacklist()
        },
        data() {
            return {
                blackFriend: [], //黑名单
                blackNum: 0, //黑名单总数
                currentPage: 1,
                pageSize: 6,
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.getRecommend()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getRecommend()
            },
            getRecommend(){
                var lenve = -1
                this.$store.dispatch('studentAnsweringModule/concernedAllList',{
                    classifyId: 4,
                    concernedClassifyRemark: this.$route.query.routerKeyPath[1],
                    lenve: lenve,//-1:黑名单,1:关注 2:好友,3:粉丝，4:新增好友,5:推荐好友"
                    userId: null,
                    page: this.currentPage,
                    limit: this.pageSize
                }).then(res => {
                    this.blackFriend = res.data.result.list;
                    this.blackNum = res.data.result.total;
                    this.total = res.data.result.total;
                    this.friendGoupList.map((item,index) => {
                    this.friendGoupList[index].img = baseUrl + item.img
                    })
                }).catch(_ => {
                    this.$message.error(res.data.msg);
                });
            },
            // 黑名单展示
            getBacklist() {
                const d = {
                    page: 1,
                    pageSize: 10
                }
                this.$store.dispatch('studentAnsweringModule/backlist', d).then(res => {
                    this.blackFriend = res.data.result.list;
                    this.blackNum = res.data.result.total;
                    this.total = res.data.result.total;
                }).catch(_ => {
                    this.$message.error(res.data.msg);
                });
            },
            //移除黑名单确认框
            removalblacklistConfirm(id) {
                this.$confirm("确定移出黑名单吗？", {
                        type: "warning"
                    })
                    .then(res => {
                        const d = {
                            id
                        };
                        const loading = this.$loading({
                            lock: true,
                            text: '正在执行',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        this.$store.dispatch('studentAnsweringModule/blackremove', d).then(res => {
                            loading.close();
                            this.$message.success(res.data.msg);
                            this.getBacklist();
                        })
                    })
                    .catch(_ => {
                        // loading.close();
                        // this.$message.error(res.data.msg);
                    });
            },
        },
        
    }
</script>

<style lang="scss" scoped>
    /deep/.el-card__body {
        padding-top: 2px;
    }
    .content-friend {
        background: #fff;
        padding: 10px;
        width: 100%;
        min-height: 520px;
        margin-left: 10px;
        text-align: left;

        .box-card {
            margin: 0px 10px 10px 10px;
            width: 46%;
            height: 120px;
            float: left;
            position: relative;
            overflow: hidden;

            .content-friend-checked {
                width: 60px;
                height: 20px;
                position: absolute;
                top: 0;
                right: 0;
                transform: rotateY(-30deg);
                background-color: #409eff;
                text-align: center;

                i {
                    color: white;
                    font-size: 22px;
                }
            }

            .box-card-img {
                float: left;
                margin-top: 10px;
            }

            .box-card-content-friend {
                border-left: 1px solid #d9d9d9;
                font-size: 14px;
                float: left;
                margin-left: 10px;
                padding-left: 10px;
                line-height: 0.4em;
                width: 65%;
            }

            .box-card-content-blacklist {
                p {
                    width: 95%;
                }
                border-left: 1px solid #d9d9d9;
                font-size: 14px;
                float: left;
                margin-left: 15px;
                padding-left: 10px;
                line-height: 1em;
                width: 65%;
            }
        }
    }

    .pageStyle {
        margin: 20px auto;
        text-align: center;
    }

    .box-card:hover {
        -webkit-box-shadow: #ccc 0px 10px 10px;
        -moz-box-shadow: #ccc 0px 10px 10px;
        box-shadow: #ccc 0px 10px 10px;
    }
</style>